大家好，我是一名菜鳥工程師，Chris，今天來到第 19 天，JS 的資料儲存

當我們在網頁開發時，會需要在瀏覽器儲存資料。而JavaScript 提供幾個不同的選擇，其中包含了 Cookies、LocalStorage 和 SessionStorage。以下是有關這些資料儲存的說明

1 Cookies：

• 通常用於瀏覽器和伺服器之間，並且存儲少量的數據資料
• 大小約 4KB
• 可以設定失效時間，預設是關閉瀏覽器後失效
• 可以設定和讀取 Cookie : 使用 document.cookie
• HTML 設置

<button onclick="showCookies()">Show cookies</button>

<div>
  <code id="cookies"></code>
</div>

• JS 設置

document.cookie = "my_name=John";
document.cookie = "favorite_food=rice";

function showCookies() {
  const output = document.getElementById("cookies");
  output.textContent = `> ${document.cookie}`;
}

2 LocalStorage：

• HTML5 提供的 API，可以永久性的儲存資料
• 大小預設有 5MB
• 不會過期，除非手動清除
• 使用 key / value 的方式給值或取值
• 設定 LocalStorage : 使用 setItem(key, value)

localStorage.setItem("my_name", "Tom");

• 讀取 LocalStorage : 使用 getItem(key)

let my_name = localStorage.getItem("my_name");
console.log(my_name); // 印出 Tom

• 移除 LocalStorage : 使用 removeItem(key)

localStorage.removeItem("my_name");

• 刪除 localStorage 所有資料 : 使用 clear()

localStorage.clear();

3 SessionStorage：

• HTML5 提供的 API，但是它只會暫時的儲存資料
• 大小預設有 5MB
• 每次分頁或瀏覽器關掉後，資料就會被清除
• 使用 key / value 的方式給值或取值
• 用法和 localStorage 相同

它們的相異之處

★ 綜合以上，localStorage 和 sessionStorage 能夠儲存大量的資料，也能進而彌補 cookie 儲存量小的不足

★★ 總結 : 以上就是 JS 的資料儲存

今天就介紹到這邊，那我們明天見囉～～

明天預計內容：JSON(JavaScript Object Notation)!!!